<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<h1><a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection</a> & Multi-Sessions Management</h1>

<hr />

<button id="open-connections">open-connections</button>
<input type="text" id="text-chat" placeholder="text chat" disabled>

<button id="stop-screen" disabled>stop-screen</button>
<button id="stop-audio-video" disabled>stop-audio-video</button>
<hr />


<script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
</script>
<script src="//cdn.webrtc-experiment.com/firebase.js">
</script>
<script>
document.querySelector('#open-connections').onclick = function() {
    audioVideoConnection.open();
    dataOnlyConnection.open();
    screenOnlyConnection.open();

    this.disabled = true;
};

var channel = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');

var audioVideoConnection = new RTCMultiConnection(channel + 'audioVideoConnection');
var dataOnlyConnection = new RTCMultiConnection(channel + 'dataOnlyConnection');
var screenOnlyConnection = new RTCMultiConnection(channel + 'screenOnlyConnection');

audioVideoConnection.session = {
    audio: true,
    video: true
};

dataOnlyConnection.session = {
    data: true
};

screenOnlyConnection.session = {
    screen: true,
    oneway: true
};

audioVideoConnection.onstream = screenOnlyConnection.onstream = function(e) {
    document.body.appendChild(e.mediaElement);
};

function appendData(data) {
    var h1 = document.createElement('h1');
    h1.innerHTML = data;
    document.body.insertBefore(h1, document.body.firstChild);
}

dataOnlyConnection.onopen = function() {
    document.querySelector('#stop-audio-video').disabled = false;
    document.querySelector('#stop-screen').disabled = false;
    document.querySelector('#text-chat').disabled = false;
};

dataOnlyConnection.onmessage = function(e) {
    appendData(e.data);
};

audioVideoConnection.connect();
dataOnlyConnection.connect();
screenOnlyConnection.connect();

document.querySelector('#text-chat').onkeyup = function(e) {
    if (e.keyCode != 13) return;
    dataOnlyConnection.send(this.value);
    appendData(this.value);
    this.value = '';
};

document.querySelector('#stop-audio-video').onclick = function() {
    this.disabled = true;
    audioVideoConnection.close();
};

document.querySelector('#stop-screen').onclick = function() {
    this.disabled = true;
    screenOnlyConnection.close();
};
</script>
<style>
html {
    background: rgb(255, 252, 239);
}

audio,
video {
    vertical-align: top;
    width: 40%;
}
</style>